import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './shared/router.ts'
// 导入整合后的样式系统
import '@/assets/styles/variables.css'  // CSS变量和主题配置（包含透明度常量）
import '@/assets/styles/base.css'       // 基础样式和重置
import '@/assets/styles/common.css'     // 从现有组件提取的公共样式
import '@/assets/styles/dark-theme.css' // 深色主题组件样式
import '@/assets/styles/markdown-classic.css' // 经典Markdown样式

// Element Plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// 导入stores
import { useUserStore } from '@/shared/user.ts'
import { useThemeStore } from '@/shared/theme.ts'

// 导入壁纸composable
import { useWallpaper } from '@/composables/useWallpaper'

const app = createApp(App)

// 使用Pinia状态管理
const pinia = createPinia()
app.use(pinia)

// 使用Vue Router
app.use(router)

// 使用Element Plus
app.use(ElementPlus)

// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// 初始化应用状态
const userStore = useUserStore()
const themeStore = useThemeStore()
const { initWallpaper } = useWallpaper()

// 初始化用户状态、主题
userStore.initUserState()
themeStore.initTheme()

app.mount('#app')

// 延迟初始化壁纸，确保DOM已完全加载
setTimeout(() => {
  initWallpaper()
}, 100)